<template>
  <el-dialog title="评定结果详情" v-model="openReviewResult" width="65%" append-to-body>
      <div class="dialog-top-line"></div>
      <div style="margin: 15px 0px; text-align: right;">
        <el-button
          type="danger"
          icon="Download"
          @click="handleOrgResultExport"
        >导出</el-button>
      </div>
      <div style="border-radius: 4px; background-color: rgb(255, 255, 255); border: 1px solid rgb(230, 231, 235); margin-bottom: 19px;">
        <div style="text-align: left; padding: 14px 0px 0px;">
          <div style="display: flex;">
            <div class="custom-divider"></div>
            <span class="spanUserTitle">{{ reviewTitle }}</span>
          </div>
          <div style="display: flex;">
            <div class="itemTogetherTitle">优秀:&nbsp;{{ togegherReview!=null? togegherReview.grade5 : 0 }}人</div>
            <div class="itemTogetherTitle">合格:&nbsp;{{ togegherReview!=null? togegherReview.grade4 : 0 }}人</div>
            <div class="itemTogetherTitle">基本合格:&nbsp;{{ togegherReview!=null? togegherReview.grade3 : 0 }}人</div>
            <div class="itemTogetherTitle">不合格:&nbsp;{{ togegherReview!=null? togegherReview.grade2 : 0 }}人</div>
            <div class="itemTogetherTitle">不定等次:&nbsp;{{ togegherReview!=null? togegherReview.grade1 : 0 }}人</div>
            <div class="itemTogetherTitle">不了解:&nbsp;{{ togegherReview!=null? togegherReview.grade0 : 0 }}人</div>
          </div>
        </div>
      </div>
      <el-table :data="reviewResultList">
        <el-table-column label="姓名" align="center" prop="reviewedUserName" width="150"/>
        <el-table-column label="所属组织" align="center" prop="reviewedUserDeptName" min-width="150"/>
        <el-table-column label="评定结果" align="center" prop="grade" width="110">
          <template #default="scope">
            <span v-if="scope.row.grade === 5">优秀</span>
            <span v-else-if="scope.row.grade === 4">合格</span>
            <span v-else-if="scope.row.grade === 3">基本合格</span>            
            <span v-else-if="scope.row.grade === 2">不合格</span>
            <span v-else-if="scope.row.grade === 1">不定等次</span>
            <span v-else-if="scope.row.grade === 0">不了解</span>
            <span v-else>&nbsp;</span>
          </template>
        </el-table-column>
        <el-table-column label="评定情况" align="center">
          <el-table-column label="优秀" align="center" prop="grade5" width="90"/>
          <el-table-column label="合格" align="center" prop="grade4" width="90"/>
          <el-table-column label="基本合格" align="center" prop="grade3" width="90"/>
          <el-table-column label="不合格" align="center" prop="grade2" width="90"/>
          <el-table-column label="不定等次" align="center" prop="grade1" width="90"/>
          <el-table-column label="不了解" align="center" prop="grade0" width="90"/>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="90">
          <template #default="scope">
            <el-button @click="viewDeptReview(scope.row)">查看支部评定</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="position: relative;right: 0px;">
        <pagination
          v-show="reviewResultTotal>0"
          :total="reviewResultTotal"
          v-model:page="queryReviewResult.pageNum"
          v-model:limit="queryReviewResult.pageSize"
          @pagination="getReviewResultList"
        />
      </div>
      <div class="dialog-bottom-line"></div>
      <template #footer>
        <div class="dialog-footer" style="margin-top: 39px;">
          <el-button @click="cancelResult">关 闭</el-button>
        </div>
      </template>
    </el-dialog>
    <org-review-result ref="orgReviewResultRef" :isDisabled="true" @callBack="getOrgReviewList"/>
</template>

<script setup>
import { listStat, reviewResultStat } from "@/api/partybuilding/Review";
import { listReviewUser } from "@/api/partybuilding/ReviewUser";
import OrgReviewResult from './OrgReviewResult.vue'
const { proxy } = getCurrentInstance();
const emit = defineEmits(['callBack']);
const openReviewResult = ref(false);
const reviewResultList = ref([]);
const reviewResultTotal = ref(0);
const reviewTitle = ref("");
const togegherReview = ref({});
const orgReviewResultRef = ref(null);

const data = reactive({
  queryReviewResult: {
    pageNum: 1,
    pageSize: 10,
    reviewId: null
  },
});
const { queryReviewResult } = toRefs(data);

// 外部调用方法---显示评定结果弹窗
const showReviewResultDlg = (reviewId, title) => {
  queryReviewResult.value.reviewId = reviewId;
  reviewTitle.value = title;
  getReviewResultList();
  openReviewResult.value = true;
};

defineExpose({
  showReviewResultDlg
});

// 查询评定结果列表
function getReviewResultList() {
  listStat(queryReviewResult.value).then(response => {
    reviewResultList.value = response.data;
    reviewResultTotal.value = response.total;
  });
  reviewResultStat(queryReviewResult.value).then(response => {
    togegherReview.value = response.data[0];
  });
}

// 查看支部评定
function viewDeptReview(row) {
  let params = {
    reviewId : row.reviewId,
    reviewedUser : row.reviewedUser,
    type : 2
  };
  listReviewUser(params).then(response => {
    let deptReviewRows = response.rows;
    if (deptReviewRows!=null && deptReviewRows.length>0) {
      let deptRow = deptReviewRows[0];
      deptRow.isView = true;
      proxy.$refs.orgReviewResultRef.showOrgResult(deptRow);
    }
  });
}

// 关闭评定结果弹窗
function cancelResult() {
  openReviewResult.value = false;
  emit('callBack', null);
}
</script>
<style lang="scss" scoped>
.spanUserTitle {
  height: 22px;
  background-color: rgb(255, 255, 255);
  color: rgb(51, 51, 51);
  font-size: 16px;
  text-align: left;
  font-family: PingFangSC-Regular;
}
.itemTogetherTitle {
    font-size: 14px;
    text-align: left;
    font-family: PingFangSC-Regular;
    color: rgb(153, 153, 153) !important;
    padding: 19px 59px;
}
.dialog-top-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0px;
  top: 49px;
}
.dialog-bottom-line {
  width: 100%;
  height: 1px;
  background-color: #ccc;
  position: absolute;
  left: 0px;
  bottom: 65px;
}
.custom-divider {
  margin: 0px 13px 0px 19px;
  width: 2px !important;
  height: 20px !important;
  background-color: #ff6383 !important;
}
</style>